<template>
  <div>
    <!-- 访客记录-详情 -->
    <public-modal
      width="1000px"
      :footer="false"
      title="复查详情页"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content" v-if="checkFlag">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">检查记录</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位名称</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.companyMessageName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.companyMessageName || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">所属行业</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.industryInformationName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.industryInformationName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">检查时间</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.checkTime || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.checkTime || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">检查类型</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.industryExamineName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.industryExamineName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">检查民警</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.policeUserName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.policeUserName || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">复查结果</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.checkResultName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.checkResultName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="sign-wrap f1">
              <div class="label common-lable">责任人签名</div>
              <div class="value common-value" style="background-color: #d3d3d3">
                <img :src="`${this.imgPrefix + policeCheckTaskInfo.principalSignatureUrl}`" alt="" />
              </div>
            </div>
            <div class="f1"></div>
          </div>
        </div>
      </div>

      <div slot="content" v-else>
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">检查记录</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位名称</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.companyMessageName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.companyMessageName || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">所属行业</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.industryInformationName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.industryInformationName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">检查时间</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.checkTime || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.checkTime || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">检查类型</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.industryExamineName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.industryExamineName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">检查民警</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.policeUserName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.policeUserName || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">检查结果</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.checkResultName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.checkResultName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="f1">
              <div class="info-wrap f1">
                <div class="label common-lable">处罚结果</div>
                <div class="value common-value">
                  {{ policeCheckUnqualifiedInfo.rectificationTypeName || '暂无' }}
                  <span v-if="policeCheckUnqualifiedInfo.isFined == 1"
                    >、罚款{{ policeCheckUnqualifiedInfo.finedMoney || '暂无' }}元</span
                  >
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">截止日期</div>
                <div class="value common-value">{{ policeCheckUnqualifiedInfo.penaltyEndTime || '暂无' }}</div>
              </div>
            </div>
            <div class="sign-wrap f1">
              <div class="label common-lable">责任人签名</div>
              <div class="value common-value" style="background-color: #d3d3d3">
                <img :src="`${this.imgPrefix + policeCheckTaskInfo.principalSignatureUrl}`" alt="" />
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1" v-if="policeCheckUnqualifiedInfo.isReceipt == 1">
              <div class="label common-lable">企业处理状态</div>
              <div class="value common-value">
                已回执
                <span class="click-color cursor" @click="showReceipt(1)">(点击查看详情)</span>
              </div>
            </div>
            <div class="info-wrap f1" v-if="policeCheckReviewInfo !== null && policeCheckReviewInfo.checkResult !== 0">
              <div class="label common-lable">复查结果</div>
              <div class="value common-value">
                十里铺派出所
                <span class="click-color cursor" @click="showReceipt(2)">(点击查看详情) </span>
              </div>
            </div>
          </div>

          <div class="common-title" style="margin-top: 20px">
            <div class="icon"></div>
            <div class="content">违法记录</div>
          </div>
          <!-- 违法记录 -->
          <div class="context" v-for="(item, index) in policeCheckCategoryInfoList" :key="index">
            <div class="classification">【{{ item.industryExamineCategoryName || '暂无' }}】</div>

            <div class="mid-section" v-for="(iterator, index) in item.policeCheckDetailInfoList" :key="index">
              <div class="project">{{ iterator.sortOrder }}、{{ iterator.industryExamineDetailName || '暂无' }}</div>

              <!-- 法律依据 -->
              <div class="legal-bvasis">
                <div class="title flex align-center justify-between">
                  <div class="left flex align-center">
                    <div class="icon"></div>
                    法律依据
                  </div>
                  <div class="right cursor">
                    <span class="fold" v-if="isShowLegalBvasisContext" @click="showContext(1)">
                      收起 <img src="@/assets/imgs/arrows.png" alt="" />
                    </span>
                    <span class="expanded" v-else @click="showContext(2)"
                      >展开 <img src="@/assets/imgs/arrows.png" alt=""
                    /></span>
                  </div>
                </div>
              </div>
              <!-- 法律条目 -->
              <div class="legal-bvasis-context" v-show="isShowLegalBvasisContext">
                <div class="legal-wrap" v-for="(val, index) in iterator.regulationsInfoList" :key="index">
                  <p>《{{ val.regulationsName || '暂无' }}》- {{ val.regulationsArticleNo || '暂无' }}</p>
                  <p>
                    {{ val.regulationsArticleContent || '暂无' }}
                  </p>
                </div>
              </div>

              <!-- 证据支持  -->
              <div class="legal-bvasis evidence">
                <div class="title flex align-center justify-between">
                  <div class="left flex align-center">
                    <div class="icon"></div>
                    证据支持
                  </div>
                  <div class="right cursor">
                    <span class="fold" v-if="isShowEvidenceContext" @click="showContext(4)">
                      收起 <img src="@/assets/imgs/arrows.png" alt="" />
                    </span>
                    <span class="expanded" v-else @click="showContext(3)"
                      >展开 <img src="@/assets/imgs/arrows.png" alt=""
                    /></span>
                  </div>
                </div>
              </div>

              <div class="evidence-context" v-show="isShowEvidenceContext">
                <!-- 证据图片 -->
                <div class="img-wrap flex">
                  <img
                    v-for="(i, index) in iterator.failedImageInfoList"
                    :key="index"
                    :src="`${imgPrefix + i.path}`"
                    :id="'idimg' + i.path"
                    @click="werImg(i.path)"
                    class="cursor"
                    :data-original="`${imgPrefix + i.path}`"
                    alt=""
                  />
                </div>
                <p>
                  {{ iterator.checkMemo || '暂无' }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>

    <receipt ref="receipt"></receipt>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import receipt from './receipt'
import publicModal from '@/components/publicModal'
import { policeRecord } from '@/api/company'
import { comMethods } from '@/mixins/comMethods'
export default {
  name: 'detailModal',
  components: { publicModal, receipt },
  mixins: [comMethods],
  data() {
    return {
      id: '',
      imgPrefix: '',
      checkFlag: true,
      publicVisible: false,
      isShowEvidenceContext: false,
      isShowLegalBvasisContext: true,
      policeCheckTaskInfo: [], // 检查单内容
      policeCheckUnqualifiedInfo: [], // 	不合格内容内容
      policeCheckReviewInfo: [], // 	复查信息
      policeCheckCategoryInfoList: [], // 不合格类别信息集合
    }
  },
  mounted() {},
  methods: {
    show(records) {
      if (records.checkResult == 1) {
        // 合格 true
        this.checkFlag = true
      } else if (records.checkResult == 2) {
        // 不合格 false
        this.checkFlag = false
      }
      this.id = records.id
      this.publicVisible = true
      this.getAllRecord()
    },
    async getAllRecord() {
      let {
        result: { policeCheckTaskInfo, policeCheckUnqualifiedInfo, policeCheckReviewInfo, policeCheckCategoryInfoList },
      } = await policeRecord({ taskId: this.id })
      this.policeCheckTaskInfo = policeCheckTaskInfo
      this.policeCheckUnqualifiedInfo = policeCheckUnqualifiedInfo
      this.policeCheckReviewInfo = policeCheckReviewInfo
      this.policeCheckCategoryInfoList = policeCheckCategoryInfoList
    },
    showContext(type) {
      if (type == 1) this.isShowLegalBvasisContext = false
      else if (type == 2) this.isShowLegalBvasisContext = true
      else if (type == 3) this.isShowEvidenceContext = true
      else if (type == 4) this.isShowEvidenceContext = false
    },

    showReceipt(type) {
      let receiptData = { ...this.policeCheckUnqualifiedInfo, ...this.policeCheckTaskInfo }
      if (type == 1) this.$refs.receipt.show(receiptData)
      else if (type == 2) this.$refs.recheckdetail.show()
    },
    werImg(i) {
      let id = 'idimg' + i
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        zIndex: '9999',
        url: 'data-original',
      })
    },
    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}
/deep/ .modalFooter {
  height: 0 !important;
}
</style>
